import React, {useState, useEffect} from 'react'
import {Modal, Card, Spin} from 'antd'
import {getRealtimeMonitor} from '&/api/electricity'
import Filter from './Filter'
import EchartsData from './EchartsData'
import './index.scss'

const ModalEacharts = ({record, open, setOpen}) => {
    const value = JSON.parse(localStorage.getItem('user'))
    const [loading, setLoading] = useState(true)
    // state: 初始化echartData和paramsData
    const [echartData, setEchartData] = useState([])
    const [paramsData, setParamsData] = useState({
        project_id: value.project_id,
        data_type_id: 8,
        time_type: '1',
        get_warn: 1
    })
    useEffect(() => {
        if (!record) return
        // 根据record生成json参数
        //如果缓存有 并且emgency_start_time未定义 则选择缓存的时间线进行请求
        if (record.start_time){
            console.log("正常")
        }else {
            record.start_time= JSON.parse(localStorage.getItem("paramsData"))['start_time']
            record.end_time= JSON.parse(localStorage.getItem("paramsData"))['end_time']
        }
        let json = {
            ...paramsData,
            ent_id: record.ent_id,
            start_time: record.start_time,
            end_time: record.end_time,
            emgency_start_time: record.emgency_start_time,
            emgency_end_time: record.emgency_end_time,
            emgency_status: 1,
        }
        // 更新paramsData状态
        setParamsData(json)
        // 调用onQuery方法查询数据
        onQuery(json)
    }, [record, open])
    // 折线图数据传参调接口
    const onQuery = async (params) => {
        await getRealtimeMonitorData(params)
    }
    // 请求接口获取数据
    const getRealtimeMonitorData = (json) => {
        setLoading(true)
        getRealtimeMonitor(json).then((res) => {
            // 更新echartData状态
            setEchartData(res)
            setLoading(false)
        })
    }
    const dom = (
        <div style={{fontSize: 14, fontWeight: 'normal'}}>
            企业名称：{record?.ent_name}
            <br/>
            限产措施：{record?.measure_old}
            <br/>
            生产工序：{record?.production_process}
        </div>
    )
    return (
        <Modal
            title={dom}
            width={1200}
            destroyOnClose={true}
            onCancel={() => setOpen(false)}
            footer={false}
            open={open}
        >
            <div className="right-eacher">
                <Card bodyStyle={{height: '100%'}} size="small">
                    {/* 过滤器组件 */}
                    <Filter
                        onQuery={onQuery}
                        paramsData={paramsData}
                        setParamsData={setParamsData}
                    />
                    {/* 折线图组件 */}
                    {loading ? (
                        <div className="spin_modal">
                            <Spin size="large"/>
                        </div>
                    ) : (
                        <EchartsData data={echartData}/>
                    )}
                </Card>
            </div>
        </Modal>
    )
}

export default ModalEacharts
